<template>
  <div>
    <viewer
      :images="images"
      :options="options"
      class="viewer"
      ref="viewer"
      @inited="inited"
      v-if="images && images.length"
    >
      <img
        v-for="{id, url} in images"
        :src="url"
        :key="id"
        class="image"
      >
    </viewer>
  </div>
</template>

<script>
  import Vue from "vue";
  import Viewer from "v-viewer";
  import "viewerjs/dist/viewer.css";
  Vue.use(Viewer);
  export default {
    data() {
      return {
        options: {
          url: "data-source"
        },
        disableMixinCreated:true,
        index: 0,
        images: []
      };
    },
    methods: {
      inited (viewer) {
        this.$viewer = viewer;
        this.$viewer.view(this.index);
      },
      view (index) {
        this.index = index++;
        if(this.$viewer!=undefined){
          this.$viewer.view(this.index);
        }
      },
      show (images, index) {
        this.images = images
        this.index = index
        this.view(index)
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .image {
    display: none;
  }
</style>
<style>
  .viewer-loading > img {
    display: none;  /* hide big images when it is loading */
  }
</style>